<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-26 16:24:05
 * @LastEditTime: 2019-09-27 17:18:34
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="container">
    <div class="container_card">
      <div class="container_head">
        <svg-icon icon-class="list" />  添加角色
      </div>
      <div class="container_body">
        <el-form
          ref="addform"
          :model="addform"
          :rules="addRules"
          label-width="150px"
          class="demo-dynamic"
        >
          <el-form-item
            label="角色名称"
            prop="name"
          >
            <el-input
              ref="name"
              v-model="addform.name"
              placeholder="角色名称"
              name="name"
            />
          </el-form-item>
          <el-form-item
            label="配置权限"
            prop="pid"
          >
            <el-input
              v-model="filterText"
              placeholder="输入关键字进行过滤"
            />
            <el-tree
              ref="tree"
              class="filter-tree"
              :data="treeData"
              show-checkbox
              :default-checked-keys="defaultChecked"
              default-expand-all
              node-key="id"
              highlight-current
              :props="defaultProps"
              :filter-node-method="filterNode"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <el-button type="btn" @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      addform: {
        hidden: true
      },
      treeData: [],
      addRules: {
        name: [{ required: true, trigger: 'blur', message: '请填写渠道名称' }]
      },
      defaultProps: [],
      filterText: '',
      defaultChecked: []
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.$api.get_permission([]).then(res => {
      console.log(res)
      for (let i = 0; i < res.data.length; i++) {
        res.data[i].label = res.data[i].name
        for (let index = 0; index < res.data[i].children.length; index++) {
          res.data[i].children[index].label = res.data[i].children[index].name
        }
      }
      this.treeData = res.data
    })
    const id = this.$route.query.id
    if (id) {
      const data = {
        id: id
      }
      this.$api.role_info(data).then(res => {
        this.addform = res.data.data
        this.defaultChecked = res.data.key
      })
    }
  },
  methods: {
    filterNode(value, data) {
      console.log(value)
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    submitForm() {
      this.$refs.addform.validate(valid => {
        if (valid) {
          console.log(this.$refs.tree.getCheckedNodes())
          this.addform.pid = this.$refs.tree.getCheckedKeys().join(',')
          this.$api.add_role(this.addform).then(res => {
            this.$notify.success({
              message: '添加成功！'
            })
            this.$router.push('/users-role')
          }).catch(() => {
            this.$notify.error({
              title: '',
              message: '网络错误'
            })
          })
        }
      })
    },
    type_channel(res) {
      console.log(res)
      this.addform.type = res
    },
    resetForm() {
      this.$refs.addform.resetFields()
      this.addform = {
        hidden: 0
      }
    }
  }
}
</script>
